<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ include file="/WEB-INF/pages/include/taglib.jsp"%>
<!DOCTYPE html>
<html>

<head>
  <!-- Meta, title, CSS, favicons, etc. -->
  <meta charset="utf-8">
  <title>AbsoluteAdmin - A Responsive Boostrap 3 Admin Dashboard</title>
  <link rel='stylesheet' type='text/css' href='http://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700'>
  <%@ include file="/WEB-INF/pages/include/baseCSS.jsp"%>
</head>

<body class="admin-layout-page">

  <!-- Start: Main -->
  <div id="main">
    <!-- Start: Content-Wrapper -->
      <!-- Begin: Content -->
      <section  class="table-layout animated fadeIn">

        <!-- begin: .tray-center -->
        <div class="">
          <div class="">

            <!-- Begin: Content Header -->
            <div class="content-header">
              <h1> <b class="text-primary">${fns:getProjectTitle()}</b> </h1>
              <p class="lead">开源内裤团队为您奉献~</p>
            </div>

            <div class="tab-content mw900 center-block center-children">

              <!-- Login 2 -->
              <div class="admin-form theme-primary tab-pane active" id="login2" role="tabpanel">
                <div class="panel ">
                  <div class="panel-heading">
                    <span class="panel-title">
                      <i class="fa fa-sign-in"></i><b class="text-primary">管理平台</b>
                     </span>
                  </div>
                  <!-- end .form-header section -->

                  <form method="post" action="/" id="form-login">
                    <div class="panel-body p25 pt10">
                      <div class="section row">
                        <div class="col-md-6">
                          <div class="section-divider mv40">
                            <span>登录方式</span>
                          </div>
                          <!-- .tagline -->
                          <div class="section">
                            <a href="#" class="button btn-social facebook span-left btn-block">
                              <span>
                                <i class="fa fa-facebook"></i>
                              </span>Facebook</a>
                            <a href="#" class="button btn-social twitter span-left btn-block">
                              <span>
                                <i class="fa fa-twitter"></i>
                              </span>Twitter</a>
                            <a href="#" class="button btn-social googleplus span-left btn-block">
                              <span>
                                <i class="fa fa-google-plus"></i>
                              </span>Google+</a>
                          </div>
                          <!-- end section -->

                        </div>
                        <!-- end .colm section -->

                        <div class="col-md-6">
                          <div class="section-divider mv40">
                            <span>账号登录</span>
                          </div>
                          <!-- .tagline -->

                          <div class="section">
                            <label for="username" class="field prepend-icon">
                              <input type="text" name="username" id="username" class="gui-input" placeholder="输入用户名" value="admin@qq.com">
                              <label for="username" class="field-icon">
                                <i class="fa fa-user"></i>
                              </label>
                            </label>
                          </div>
                          <!-- end section -->

                          <div class="section">
                            <label for="password" class="field prepend-icon">
                              <input type="password" name="password" id="password" class="gui-input" placeholder="输入密码" value="11111">
                              <label for="password" class="field-icon">
                                <i class="fa fa-lock"></i>
                              </label>
                            </label>
                          </div>
                          <!-- end section -->

                          <div class="section">
                            <label class="switch block">
                              <input type="checkbox" name="remember2" id="remember2" checked>
                              <label for="remember2" data-on="YES" data-off="NO"></label>
                              <span>记住我</span>
                            </label>
                          </div>
                          <!-- end section -->

                        </div>
                        <!-- end .colm section -->

                      </div>
                      <!-- end .section row section -->

                    </div>
                    <!-- end .form-body section -->
                    <div class="panel-footer">
                      <button id="loginBtn" type="button" class="button btn-primary">登录</button>
                    </div>
                    <!-- end .form-footer section -->
                  </form>
                </div>
                <!-- end .admin-form section -->
              </div>
              <!-- end: .admin-form -->

            </div>
          </div>
        </div>
        <!-- end: .tray-center -->
      </section>
      <!-- End: Content -->
  </div>
  <%@ include file="/WEB-INF/pages/include/baseJS.jsp"%>
  <script src="${ctxStatic}/assets/js/notify.js"></script>
	<script type="text/javascript">
	    $(document).ready(function () {
	    	//当session已经过期的情况下
	    	if(self!=top){
	    		var _href = top.location.href;
	    		var index = _href.indexOf("#");
	    		if(index>0){
	    			top.location.href = "${ctx}/login"+_href.substring(index);;
	    		}else
	    			top.location.href = "${ctx}/login";
			}
            var options = {
                //target: '#output',          //把服务器返回的内容放入id为output的元素中
                beforeSubmit:function showRequest(formData, jqForm, options){
	                //formData: 数组对象，提交表单时，Form插件会以Ajax方式自动提交这些数据，格式如：[{name:user,value:val },{name:pwd,value:pwd}]
	                //jqForm:   jQuery对象，封装了表单的元素
	                //options:  options对象
	                return true;  //只要不返回false，表单都会提交,在这里可以对表单元素进行验证
	               },  //提交前的回调函数
                success: function(data, status){//表单初始化
             	   if(data.ok)
	                       window.location.href = "${ctx}/index";
                   else
                	   notify('登录失败','用户名/密码错误，请重新登录!','danger',true);
	               },      //提交后的回调函数
	               error: function(data, status){
	            	   
 	           }, 
                url: "${ctx}/auth",                 //默认是form的action， 如果申明，则会覆盖
                type: 'post',               //默认是form的method（get or post），如果申明，则会覆盖
                dataType: 'json',           //html(默认), xml, script, json...接受服务端返回的类型
                //clearForm: true,          //成功提交后，清除所有表单元素的值
                //resetForm: true,          //成功提交后，重置所有表单元素的值
                timeout: 30000               //限制请求的时间，当请求大于3秒后，跳出请求
            }
            $('#loginBtn').click(function(){
         	   $('#form-login').ajaxSubmit(options);
            });
               
	    });
	</script>
</body>
</html>